<template>
  <div class="goods_new">
    <van-nav-bar title="注册门店" left-arrow @click-left="goback"/>
    <div style="background:#fff;padding: 0 10px;">
      <van-field class="border-bottom" v-model="name" placeholder="门店名称" />
      <van-field class="border-bottom" v-model="member" placeholder="负责人姓名" />
      <van-field class="border-bottom" v-model="mobile" placeholder="手机号" />
      <van-field class="border-bottom" v-model="address" placeholder="店铺地址" />
      <van-dropdown-menu>
        <van-dropdown-item v-model="storeId" :options="option1" />
      </van-dropdown-menu>
    </div>
    <div class="posR" style="background: rgb(255, 255, 255); padding: 0px 10px;">
      <div class="tit">店铺图片（请上传门店展示图）</div>
      
      <div v-if="!shopImg" class="van-uploader" @click="showItem('dian')">
        <div class="van-uploader__wrapper">
          <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon"><!----></i></div>
          </div>
      </div>
      <div v-if="shopImg" class="van-uploader__preview"><div class="van-image van-uploader__preview-image"><img :src="shopImg" class="van-image__img" style="object-fit: cover;"></div></div>
    </div>
    <div class="posR" style="background: rgb(255, 255, 255); padding: 0px 10px;">
      <div class="tit">营业执照</div>
      <div v-if="!licenseImg" class="van-uploader" @click="showItem('zhi')">
        <div class="van-uploader__wrapper">
          <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon"><!----></i></div>
          </div>
      </div>
      <div v-if="licenseImg" class="van-uploader__preview"><div class="van-image van-uploader__preview-image"><img :src="licenseImg" class="van-image__img" style="object-fit: cover;"></div></div>
    </div>
   <!-- <div class="posR" style="background: #fff; padding: 0 10px;">
      <div class="tit">店铺图片（请上传门店展示图）</div>
      <van-uploader :after-read="Read1" v-model="shopImgList" :max-count="1" :before-delete="imgDel" :deletable=false />
    </div>
    <div class="posR" style="background: #fff; padding: 0 10px;">
      <div class="tit">营业执照</div>
      <van-uploader :after-read="Read2" v-model="licenseImgList" :max-count="1" :before-delete="imgDel" :deletable=false />
    </div> -->
    <div class="buttonPos">
      <van-button @click="submitHandle" type="primary" size="large">提交</van-button>
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
      @cancel="show=false"
    />
  </div>
</template>

<script>
import { storageUpload, shopRegister, storeInfo, uploadBASE64 } from '@/api/api';
import { Toast, DropdownMenu, DropdownItem, Uploader, Field, ActionSheet  } from 'vant';
import scrollFixed from '@/mixin/scroll-fixed';

export default {
  mixins: [scrollFixed],

  data() {
    return {
      actionType: '',
      show: false,
      selUp: '',
      actions: [
        { name: '使用相机', value: 'Camera' },
        { name: '打开相册', value: 'SAVEDPHOTOALBUM'  },
      ],
       sourceType:{ "SAVEDPHOTOALBUM": Camera.PictureSourceType.SAVEDPHOTOALBUM, "Camera" :Camera.PictureSourceType.Camera},
      name: '',
      member: '',
      mobile: '',
      address: '',
      storeId: 0,
      shopImg: '',
      shopImgList: [],
      licenseImg: '',
      licenseImgList: [],
      option1: [
        { text: '请选择服务门店', value: 0 },
      ],
      loading: false,
    };
  },

  mounted () {
    this.init()
  },

  methods: {
    init() {
      storeInfo().then(res => {
        console.log(res)
        if(res.data.errno === 0) {
          res.data.data.storeList.forEach((item, index) => {
            console.log(item.name)
            this.option1.push({ text: item.name, value: item.userId})
          })
          // this.option1.push({ text: res.data.data.})
        }
      })
    },
    showItem(item) {
      this.show = true
      this.selUp = item
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      let type = ''
      if(item.value === 'Camera') {
        type = 1
      } else {
        type = 0
      }
      var cameraOptions={
        quality: 50,
        sourceType: type,
        destinationType: Camera.DestinationType.DATA_URL
      };
      //此处是官网提供的调用方法
      navigator.camera.getPicture(this.onSuccess, this.onFail, cameraOptions);
    },
    onSuccess(imageData) {
      let formData = new FormData()
      formData.append('file', "data:image/jpeg;base64," + imageData)
      // console.log(file, 'upload')
      uploadBASE64({imgCode: "data:image/jpeg;base64," + imageData}).then(res => {
        console.log(res, 'upload')
        if(res.data.errno === 0) {
          Toast('上传成功');
          if (this.selUp === 'dian') {
            this.shopImg = res.data.data.url
          } else if (this.selUp === 'zhi') {
            this.licenseImg = res.data.data.url
          } else {
            Toast('上传对象不存在');
          }
        } else {
          Toast(res.data.errmsg);
        }
      })
      
      // var image = document.getElementById('myImage');
      // this.demo = "data:image/jpeg;base64," + imageData;
    },
    onFail() {
    },
    Read1(file) {
      // 此时可以自行将文件上传至服务器
      let formData = new FormData()
      formData.append('file', file.file)
      console.log(file.file, 'uploads')
      storageUpload(formData).then(res => {
        console.log(res, 'upload')
        if(res.data.errno === 0) {
          Toast('上传成功');
          this.shopImg = res.data.data.url
        } else {
          Toast(res.data.errmsg);
        }
      })
    },
    Read2(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let formData = new FormData()
      formData.append('file', file.file)
      storageUpload(formData).then(res => {
        console.log(res, 'upload')
        if(res.data.errno === 0) {
          Toast('上传成功');
          this.licenseImg = res.data.data.url
        } else {
          Toast(res.data.errmsg);
        }
      })
    },
    imgDel() {
      // alert('sel')
    },
    submitHandle() {
      if(this.name === '') {
        Toast('请填写门店名称');
        return false
      }
      if(this.member === '') {
        Toast('请填写负责人姓名');
        return false
      }
      if (this.mobile === '' || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.mobile)) {
        Toast('请填写正确的电话');
        return false
      }
      if(this.address === '') {
        Toast('请填写店铺地址');
        return false
      }
      if(this.storeId === '' || this.storeId === 0) {
        Toast('请选择服务中心');
        return false
      }
      if(this.shopImg === '') {
        Toast('请上传店铺图片');
        return false
      }
      if(this.licenseImg === '') {
        Toast('请上传营业执照');
        return false
      }
      shopRegister({name: this.name, member: this.member, mobile: this.mobile, address: this.address, storeId: this.storeId, shopImg: this.shopImg, licenseImg: this.licenseImg}).then(res => {
        console.log(res)
        if (res.data.errno === 0) {
          Toast('注册成功');
          this.$router.go(-1);
        } else {
          Toast(res.data.errmsg);
          this.$router.go(-1);
        }
      })
    },
    goback() {
      this.$router.go(-1);
    }
  },

  components: {
    [ActionSheet.name]: ActionSheet,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    Toast
  }
};
</script>

<style lang="scss" scoped>
/deep/.van-cell {
  padding: 10px 0;
}
/deep/.van-cell:not(:last-child)::after {
  left: 0;
}
/deep/.van-uploader__preview-delete {
  display: none;
}
/deep/.van-dropdown-menu__item {
  justify-content: left;
}
/deep/.van-dropdown-menu__title {
  padding: 0;
}
/deep/.van-dropdown-menu__title::after {
  left: 20rem;
  right: 0;
}
/deep/.van-dropdown-item__option {
  padding: 10px;
}
.posR {
  position: relative;
}
.zishu {
  position: absolute;
  right: 10px;
  top: 0;
}
.tit {
  color: #999;
  margin-top: 5px;
  padding-top: 5px;
  margin-bottom: 5px;
}
.buttonPos {
  position: absolute;
  bottom: 20px;
  display: block;
  left: 20px;
  right: 20px;
}
</style>